<template>
  <div>
    <headers :head_title="head_title" />
    <div class="bank_message_bg">
      <p class="bank_message_title">中国银行卡</p>
      <p>储蓄卡</p>
      <p class="bank_message_card">{{bank_message_list}}</p>
      <p class="bank_message_time">{{ bank_time }}</p>
    </div>
    <van-button @click="bank_message" class="bank_message_button" type="primary">更换绑定</van-button>
  </div>
</template>

<script setup lang="ts">
import headers from '@/components/header.vue'
import { ref } from 'vue';
import {useRouter} from 'vue-router'
const head_title='查看银行卡信息'
const bank_message_card= ref(localStorage.getItem('bank_ocrResult') )
const bank_time=localStorage.getItem('bank_time')
const bank_message_list=ref('')
const router=useRouter()
const bank_message=()=>{
  console.log('更换绑定');
  router.push({path:'/bound_bank'})
  // 清除bank_ocrResult
}

if (bank_message_card) {
  const bank_message_1=bank_message_card.value.slice(0, 15);
  // 获取前4个字符
  const firstFour = bank_message_1.slice(0, 4);
  // 获取中间4个字符
  const middleFour = bank_message_1.slice(bank_message_1.length / 2 - 2, bank_message_1.length / 2 + 2);
  // 计算需要用*替换的字符长度
  const hiddenLength1 = bank_message_1.length - firstFour.length - middleFour.length-3;
  // 生成隐藏部分的字符串
  const hiddenPart1 = '*'.repeat(hiddenLength1);
  const hiddenPart2 = '*'.repeat(hiddenLength1);
  const result = firstFour+hiddenPart1+middleFour+hiddenPart2;

  bank_message_list.value=result
}

</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.bank_message_bg{
  position: absolute;
  top: 120px;
  left: 5%;
  width: 90%;
  margin: 10px auto;
  color: #fff;
  height: 190px;
   /* 设置背景图片 */
  background-image: url('../../image/银行卡.png');
  background-repeat: no-repeat;
  /* background-repeat: repeat-x;
  background-repeat: repeat-y; */
  background-size: 100% 100%;
}
.bank_message_bg p{
  padding: 10px;
  margin-left: 15px;
}
.bank_message_title{
  font-size: 20px;
}
.bank_message_card{
  font-size: 23px;
}
.bank_message_time{
  position: absolute;
  right: 10%;
}
.bank_message_button{
  width: 90%;
  height: 40px;
  font-size: 16px;
  border-radius: 8px;
  color: #fff;
  background: #1a7ff2;
  position: absolute;
  left: 5%;
  bottom: 10%;
}
</style>
